<!--
 * @Author: XY
 * @Date: 2023-11-10 16:59:58
 * @LastEditors: XY
 * @LastEditTime: 2023-11-20 11:23:36
 * @FilePath: \friendsApp\see_you\src\components\addLabel.vue
 -->
 <template>
  <div class="popup">
    <van-popup
      v-model="showLabelViewPop"
      round
      position="bottom"
      :close-on-click-overlay="false"
      :style="{ height: '80%' }"
    >
      <div class="box">
        <div class="box-text">已选择标签</div>
        <div class="box-after">
          <div
            class="box-after-tag"
            v-for="itemChange in changeLabel"
            :key="itemChange.id"
            @click="deleteLabel(itemChange.id)"
          >
            <span class="text-group_1">{{ itemChange.label_name }}</span>
            <van-icon name="cross" size="12" />
          </div>
        </div>
        <div class="box-text">全部标签</div>
        <!-- 服务标签 -->
        <div class="box-before" v-if="type === 'service'">
          <div
            class="box-before-tag"
            v-for="itemService in service_label"
            :key="itemService.id"
            @click="itemService.isChange ? '' : addLabel(itemService.id)"
            :style="itemService.isChange ? 'border:1px solid #767676' : ''"
          >
            <span class="text_26">{{ itemService.label_name }}</span>
          </div>
        </div>
        <!-- 评论标签 -->
        <div class="box-before" v-if="type === 'assess'">
          <div
            class="box-before-tag"
            v-for="itemAssess in assess_label"
            :key="itemAssess.id"
            @click="itemAssess.isChange ? '' : addLabel(itemAssess.id)"
            :style="itemAssess.isChange ? 'border:1px solid #767676' : ''"
          >
            <span class="text_26">{{ itemAssess.label_name }}</span>
          </div>
        </div>
        <!-- 印象标签 -->
        <div class="box-before" v-if="type === 'picture'">
          <div
            class="box-before-tag"
            v-for="itemPicture in picture_label"
            :key="itemPicture.id"
            @click="itemPicture.isChange ? '' : addLabel(itemPicture.id)"
            :style="itemPicture.isChange ? 'border:1px solid #767676' : ''"
          >
            <span class="text_26">{{ itemPicture.label_name }}</span>
          </div>
        </div>
        <div class="box-botton">
          <div class="box-botton-cancel" @click="cancel">
            <span class="text_33">取消</span>
          </div>
          <div class="box-botton-submit" @click="childSubmit">
            <span class="text_34">确定</span>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { addUserReply } from '@/api/index'
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'popup',
  props: {
    showLabelViewPop: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
    },
  },
  computed: {
    ...mapGetters('siteConfig', [
      'service_label',
      'assess_label',
      'picture_label',
    ]),
  },
  data() {
    return {
      changeLabel: [],
      params: {
        comment: '',
        info_score: 3.15,
        service_score: 1.56,
        effec_score: 2.58,
        recom_score: 4.78,
        merchant_id: 89,
      },
    }
  },
  mounted() {
    this.$store.dispatch('siteConfig/setting', '')
  },
  methods: {
    deleteLabel(id) {
      let index = this.changeLabel.findIndex((item) => {
        return item.id == id
      })

      this.changeLabel.splice(id, 1)
      if (index != -1) {
        this.changeLabel.splice(index, 1)
        if (this.type == 'service') {
          this.service_label.forEach((res, index) => {
            if (res.id == id) {
              res.isChange = false
            }
          })
        } else if (this.type == 'assess') {
          this.assess_label.forEach((res, index) => {
            if (res.id == id) {
              res.isChange = false
            }
          })
        } else if (this.type == 'picture') {
          this.picture_label.forEach((res, index) => {
            if (res.id == id) {
              res.isChange = false
            }
          })
        }
      }
    },
    addLabel(value) {
      // 服务
      if (this.type === 'service') {
        this.service_label.map((res, index) => {
          if (res.id == value) {
            res.isChange = true
          }
        })
        let item = this.service_label.filter((items) => items.id == value)
        this.changeLabel.push(...item)
      } else if (this.type == 'assess') {
        this.assess_label.map((res, index) => {
          // 评论
          if (res.id == value) {
            res.isChange = true
          }
        })
        let item = this.assess_label.filter((items) => items.id == value)
        this.changeLabel.push(...item)
      } else if (this.type == 'picture') {
        this.picture_label.map((res, index) => {
          if (res.id == value) {
            res.isChange = true
          }
        })
        let item = this.picture_label.filter((items) => items.id == value)
        this.changeLabel.push(...item)
      }
    },
    cancel() {
      this.changeLabel = []
      this.$emit('closeLabelViewPop', {
        show: false,
        data: [],
        type: this.type,
        isCancel: true,
      })
      this.picture_label.forEach((res) => {
        res.isChange = false
      })
      this.assess_label.forEach((res) => {
        res.isChange = false
      })
      this.service_label.forEach((res) => {
        res.isChange = false
      })
    },
    childSubmit() {
      this.$emit('closeLabelViewPop', {
        show: false,
        data: [...this.changeLabel],
        type: this.type,
      })
      this.changeLabel = []

      this.picture_label.forEach((res) => {
        res.isChange = false
      })
      this.assess_label.forEach((res) => {
        res.isChange = false
      })
      this.service_label.forEach((res) => {
        res.isChange = false
      })
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.box {
  padding: 24px 15px;
  &-text {
    padding: 20px 0;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
  }
  &-after {
    display: flex;
    flex-wrap: wrap;
    &-tag {
      margin: 5px;
      display: inline;
      padding: 4px 7px;
      border-radius: 8px;
      border: 1px solid #767676;
      font-size: 12px;
      font-weight: 400;
      color: #767676;
    }
  }
  &-before {
    display: flex;
    flex-wrap: wrap;

    &-tag {
      margin: 5px;
      display: inline;
      padding: 4px 7px;
      font-size: 12px;
      font-weight: 400;
      color: #767676;
      background: #eeeeee;
      border-radius: 8px;
    }
    &-activetag {
      border: 1px solid #767676;
    }
  }
  &-botton {
    font-size: 0.37333rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    &-cancel {
      width: 163px;
      height: 50px;
      background: #eeeeee;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #767676;
    }
    &-submit {
      width: 163px;
      height: 50px;
      background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
      border-radius: 8px;

      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
